<mat-card class="example mat-elevation-z16">
  <mat-card-header>
    <mat-card-title>
      CDK Virtual Scroll Example
    </mat-card-title>
  </mat-card-header>
  <mat-card-content>
    <div class="exampleVirtualScroll">
      <ng-scrollbar appearance="compact"
                    [autoHeightDisabled]="true"
                    [autoWidthDisabled]="true">
        <cdk-virtual-scroll-viewport scrollViewport itemSize="50" minBufferPx="100" maxBufferPx="200">
          <mat-list>
            <mat-list-item class="example-item" *cdkVirtualFor="let item of items">
              {{item}}
            </mat-list-item>
          </mat-list>
        </cdk-virtual-scroll-viewport>
      </ng-scrollbar>
    </div>
  </mat-card-content>
</mat-card>
